<template>
    <div class="help-box" :style="styles">
        <span v-if="!hideIcon" class="icon icon-tishi mr5"></span>
        <slot></slot>
    </div>
</template>
<script lang="ts" name="help" setup>
import { computed, StyleValue } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = withDefaults(
  defineProps<{
    type?: string;
    color?:string;
    width?:string;
    hideIcon?:boolean;
  }>(),
  {
    type: "text",
    color: "var(--base-grey)",
    width:'100%',
    hideIcon:false
  }
);

const styles = computed<StyleValue>(() => {
  return [
    props.color ? `color: ${props.color}` : "",
    `width: ${props.width}`
  ];
});
</script>
<style scoped>
.help-box{
    font-size: 12px;
}
</style>